﻿<template>
    <div class="StockDetail">
        <MyDialog :model-value="true" :type="DialogType.C3" :title="title" @close="onClose">
            <el-form ref="StockDetailFormRef" label-width="110" :model="thisData">
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="钢丝绳编码" prop="code">
                            <el-input v-model="thisData.code" maxlength="50" disabled></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="钢丝绳名称" prop="name">
                            <el-input v-model="thisData.name" maxlength="200" :disabled="isSee"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="规格型号" prop="guiGe">
                            <el-input v-model="thisData.guiGe" maxlength="200" :disabled="isSee"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="直径" prop="diameter">
                            <InputNumber v-model="thisData.diameter" :disabled="isSee" append="mm"></InputNumber>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="公称捻距" prop="nianJu">
                            <InputNumber v-model="thisData.nianJu" :disabled="isSee" append="mm"> </InputNumber>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="抗拉强度" prop="mpaID">
                            <DataSelect table="Mpa" class="w-100" v-model:id="thisData.mpaID" v-model:name="thisData.mpaName" :disabled="isSee"></DataSelect>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="表面状态" prop="surfaceStatusID">
                            <DataSelect table="SurfaceStatus" class="w-100" v-model:id="thisData.surfaceStatusID" v-model:name="thisData.surfaceStatusName" :disabled="isSee"></DataSelect>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="捻制类型" prop="twistingTypeID">
                            <DataSelect table="TwistingType" class="w-100" v-model:id="thisData.twistingTypeID" v-model:name="thisData.twistingTypeName" :disabled="isSee"></DataSelect>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="长度" prop="lengthNum">
                            <InputNumber v-model="thisData.lengthNum" :disabled="isSee" append="m"></InputNumber>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="绳子条数" prop="cnt">
                            <InputNumber v-model="thisData.cnt" :precision="0" :disabled="isSee" append="根"> </InputNumber>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="维保周期" prop="keepDay">
                            <InputNumber v-model="thisData.keepDay" :precision="0" :disabled="isSee" append="天"> </InputNumber>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="供应商" prop="supplierID">
                            <DataSelect table="Supplier" class="w-100" v-model:id="thisData.supplierID" v-model:name="thisData.supplierName" :disabled="isSee"></DataSelect>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="制造商" prop="producerID">
                            <DataSelect table="Producer" class="w-100" v-model:id="thisData.producerID" v-model:name="thisData.producerName" :disabled="isSee"></DataSelect>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="矿山" prop="departmentID">
                            <DataSelect table="Department" class="w-100" :filter="{ _Type: Enums.Department_Type.矿山 }" v-model:id="thisData.departmentID" :disabled="isSee"></DataSelect>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="出厂报告" prop="chuChang_Files">
                            <ButtonImage v-model="thisData.chuChang_FilesList" appendToBody :readonly="isSee" type="warning" :text="isSee ? '查看' : '上传'"></ButtonImage>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="验收报告" prop="yanShou_Files">
                            <ButtonImage v-model="thisData.yanShou_FilesList" appendToBody :readonly="isSee" type="warning" :text="isSee ? '查看' : '上传'"></ButtonImage>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="倒卷检测报告" prop="jianCe_Files">
                            <ButtonImage v-model="thisData.jianCe_FilesList" appendToBody :readonly="isSee" type="warning" :text="isSee ? '查看' : '上传'"></ButtonImage>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="附件" prop="attr_Files">
                            <ButtonImage v-model="thisData.attr_FilesList" appendToBody :readonly="isSee" type="warning" :text="isSee ? '查看' : '上传'"></ButtonImage>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="提升机类型" prop="hoisterID">
                            <DataSelect table="Hoister" class="w-100" v-model:id="thisData.hoisterID" v-model:name="thisData.hoisterName" :disabled="isSee" @change="hoisterChange"></DataSelect>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="提升机用途" prop="hoisterUsageID">
                            <DataSelect ref="HoisterUsageRef" table="HoisterUsage" class="w-100" :filter="{ _HoisterID: thisData.hoisterID }" v-model:id="thisData.hoisterUsageID" v-model:name="thisData.hoisterUsageName" :disabled="isSee"></DataSelect>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="钢丝绳类型" prop="wireropeTypeID">
                            <DataSelect ref="WireropeTypeRef" table="WireropeType" class="w-100" :filter="{ _HoisterID: thisData.hoisterID }" v-model:id="thisData.wireropeTypeID" v-model:name="thisData.wireropeTypeName" :disabled="isSee"></DataSelect>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="备注" prop="remark">
                            <el-input v-model="thisData.remark" maxlength="500" :disabled="isSee"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div class="rowTitle marb-10" v-if="isSee">流转信息</div>
            <DataTable ref="billDataTableRef" divHeight="auto" :data="thisData.billModel" :hasTop="false" :hasPager="false" :hasCheckbox="false" v-if="isSee">
                <vxe-column title="出入库单号" min-width="120" show-overflow>
                    <template #default="{ row }">
                        {{ row.code || "-" }}
                    </template>
                </vxe-column>

                <vxe-column title="出入库类型" min-width="120" show-overflow>
                    <template #default="{ row }">
                        <!-- <span :class="Enums.Bill_InOutType.Get(row.inOutType).color">{{ Enums.Bill_InOutType.Get(row.inOutType).text }}</span> -->
                        {{ row.operType_Name || "-" }}
                    </template>
                </vxe-column>

                <vxe-column title="状态" min-width="120" show-overflow>
                    <template #default="{ row }">
                        <span :class="Enums.Bill_Status.Get(row.status).color">{{ Enums.Bill_Status.Get(row.status).text }}</span>
                    </template>
                </vxe-column>

                <vxe-column title="申请人" min-width="120" show-overflow>
                    <template #default="{ row }">
                        {{ row.applyUserName || "-" }}
                    </template>
                </vxe-column>

                <vxe-column title="申请时间" min-width="120" show-overflow>
                    <template #default="{ row }">
                        {{ Gx.YMD(row.createDate) }}
                    </template>
                </vxe-column>

                <vxe-column title="验收人" min-width="120" show-overflow>
                    <template #default="{ row }">
                        {{ row.confirmUserName || "-" }}
                    </template>
                </vxe-column>

                <vxe-column title="验收时间" min-width="120" show-overflow>
                    <template #default="{ row }">
                        {{ Gx.YMD(row.confirmDate) }}
                    </template>
                </vxe-column>

                <vxe-column title="出入库备注" min-width="120" show-overflow>
                    <template #default="{ row }">
                        {{ row.remark || "-" }}
                    </template>
                </vxe-column>
            </DataTable>
            <div class="rowTitle marb-10 mart-10" v-if="isSee">维保记录</div>
            <DataTable ref="keepDataTableRef" divHeight="360px" :data="thisData.stockWireropeKeepModelList" :hasTop="false" :hasPager="false" :hasCheckbox="false" v-if="isSee">
                <vxe-column title="实施单位">
                    <template #default="{ row }" min-width="120" show-overflow>
                        {{ row.companyName || "-" }}
                    </template>
                </vxe-column>

                <vxe-column title="实施人员" min-width="120" show-overflow>
                    <template #default="{ row }">
                        {{ row.userName || "-" }}
                    </template>
                </vxe-column>

                <vxe-column title="实施日期" min-width="120" show-overflow>
                    <template #default="{ row }">
                        {{ Gx.YMD(row.doDate) }}
                    </template>
                </vxe-column>

                <vxe-column title="实施照片" min-width="120" show-overflow>
                    <template #default="{ row }">
                        <ButtonImage v-model="row.pic_ImgsList" appendToBody readonly type="warning" text="查看"></ButtonImage>
                    </template>
                </vxe-column>

                <vxe-column title="备注" min-width="120" show-overflow>
                    <template #default="{ row }">
                        {{ row.remark || "-" }}
                    </template>
                </vxe-column>

                <vxe-column title="状态" min-width="120" show-overflow>
                    <template #default="{ row }">
                        <span :class="Enums.StockWireropeKeep_Status.Get(row.status).color">{{ Enums.StockWireropeKeep_Status.Get(row.status).text }}</span>
                    </template>
                </vxe-column>

                <vxe-column title="操作" min-width="120" fixed="right">
                    <template #default="{ row }">
                        <el-button type="warning" @click="onShowDetail(row, true)">详情</el-button>
                    </template>
                </vxe-column>
            </DataTable>
            <!-- 备绳维保详情 -->
            <StockWireropeKeepDetail ref="StockWireropeKeepDetailRef" v-if="isShowStockWireropeKeepDetail" @close="isShowStockWireropeKeepDetail = false"></StockWireropeKeepDetail>
            <template #footer>
                <el-button type="primary" :loading="loading" @click="onSave" v-if="!isSee">保存</el-button>
            </template>
        </MyDialog>
    </div>
</template>

<script lang="ts" setup>
import Enums from "@/gx/Enums";
import Gx from "@/gx/Gx";
import { FormRules } from "element-plus";
import { DialogType } from "@/_gx/TsEnums";
// 备绳维保详情
import StockWireropeKeepDetail from "@/views/wb/StockWireropeKeep/StockWireropeKeepDetail.vue";

//接收父组件的传值
const stockID = inject("stockID") as Ref<number | null>;

//定义当前页面数据对象
const thisData = ref<any>({});

//loading...
const loading = ref(false);

//查看
const isSee = ref(false);

//提升机用途  钢丝绳类型
const HoisterUsageRef = ref();
const WireropeTypeRef = ref();

//定义表单验证规则
const rules = ref<FormRules>({
    billID: [{ required: true, message: "请选择单据", trigger: "change" }],
    billDetailID: [{ required: true, message: "请选择单据详细", trigger: "change" }],
    warehouseID: [{ required: true, message: "请选择仓库", trigger: "change" }],
    warehousePositionID: [{ required: true, message: "请选择仓库库位", trigger: "change" }],
    code: [{ required: true, message: "请输入编码", trigger: "blur" }],
    guiGe: [{ required: true, message: "请输入规格型号", trigger: "blur" }],
    diameter: [{ required: true, message: "请输入直径", trigger: "blur" }],
    cnt: [{ required: true, message: "请输入绳子条数", trigger: "blur" }],
    name: [{ required: true, message: "请输入钢丝绳名称", trigger: "blur" }],
    nianJu: [{ required: true, message: "请输入公称捻距", trigger: "blur" }],
    mpaID: [{ required: true, message: "请选择抗拉强度", trigger: "change" }],
    surfaceStatusID: [{ required: true, message: "请选择表面状态", trigger: "change" }],
    twistingTypeID: [{ required: true, message: "请选择捻制类型", trigger: "change" }],
    lengthNum: [{ required: true, message: "请输入长度", trigger: "blur" }],
    keepDay: [{ required: true, message: "请输入备绳维保周期", trigger: "blur" }],
    supplierID: [{ required: true, message: "请选择供应商", trigger: "change" }],
    producerID: [{ required: true, message: "请选择制造商", trigger: "change" }],
    chuChang_Files: [{ required: true, message: "请选择出厂报告", trigger: "change" }],
    yanShou_Files: [{ required: true, message: "请选择验收报告", trigger: "change" }],
    jianCe_Files: [{ required: true, message: "请选择倒卷检测报告", trigger: "change" }],
    attr_Files: [{ required: true, message: "请选择附件", trigger: "change" }],
    departmentID: [{ required: true, message: "请选择矿山", trigger: "change" }],
    hoisterUsageID: [{ required: true, message: "请选择提升机用途", trigger: "change" }],
    wireropeTypeID: [{ required: true, message: "请选择钢丝绳类型", trigger: "change" }],
    remark: [{ required: true, message: "请输入备注", trigger: "blur" }],
    isOut: [{ required: true, message: "请输入是否出库", trigger: "blur" }],
    nextKeepDate: [{ required: true, message: "请选择下次维保日期", trigger: "change" }],
});

//标题
const title = computed(() => {
    if (Gx.IsEmpty(stockID.value)) {
        return "库存信息详情 - 创建";
    } else {
        return `库存信息详情 - 编辑 - ${thisData.value.code}`;
    }
});

//初始化
const Init = (flag) => {
    isSee.value = flag;
    if (!Gx.IsEmpty(stockID.value)) {
        App.CallApi(Api.Stock.GetByID(stockID.value), {
            success: (res) => {
                thisData.value = res;

                if (!Gx.IsEmpty(res.hoisterID)) {
                    nextTick(() => {
                        HoisterUsageRef.value.GetList();
                        WireropeTypeRef.value.GetList();
                    });
                } else {
                    HoisterUsageRef.value.ClearData();
                    HoisterUsageRef.value.ClearList();

                    WireropeTypeRef.value.ClearData();
                    WireropeTypeRef.value.ClearList();
                }
            },
        });
    }
};

//表单Ref对象
const StockDetailFormRef = ref(null);

//保存
const onSave = () => {
    StockDetailFormRef.value.validate((isOk: boolean) => {
        if (!isOk) {
            return;
        }

        let _api = null;
        let _data = thisData.value;
        if (Gx.IsEmpty(stockID.value)) {
            //添加
            _api = Api.Stock.Insert;
        } else {
            //修改
            _api = Api.Stock.Update;
        }

        loading.value = true;
        App.CallApi(_api, {
            data: _data,
            success: (res) => {
                emits("close", true);
            },
            complete: () => {
                loading.value = false;
            },
        });
    });
};

//提升机类型选择
const hoisterChange = (row, flag) => {
    HoisterUsageRef.value.ClearData();
    HoisterUsageRef.value.ClearList();

    WireropeTypeRef.value.ClearData();
    WireropeTypeRef.value.ClearList();

    if (Gx.IsEmpty(thisData.value.hoisterID)) {
        return;
    }

    nextTick(() => {
        HoisterUsageRef.value.GetList();
        WireropeTypeRef.value.GetList();
    });
};

/********************************************** 详情 **********************************************/
//备绳维保详情
const isShowStockWireropeKeepDetail = ref(false);
const StockWireropeKeepDetailRef = ref(null);

//向子组件传值
const rowAutoID = ref<number | null>(null);
provide("rowAutoID", rowAutoID);

//显示详情
const onShowDetail = (row, flag) => {
    rowAutoID.value = row?.autoID;
    isShowStockWireropeKeepDetail.value = true;
    nextTick(() => {
        StockWireropeKeepDetailRef.value.Init(true);
    });
};

//关闭
const onClose = () => {
    emits("close", false);
};

//向上抛出的事件与方法
const emits = defineEmits(["close"]);
defineExpose({ Init });
</script>
